<template>
  <!-- element-ui -->
  <el-container>
    <el-header style="height: 280px; padding: 0px">
      <FestivalHeader @goTo="goTo()" class="wrap"></FestivalHeader>
    </el-header>
    <el-main>
      <component :is="this.$store.state.comname"></component>
    </el-main>
    <el-footer style="height: 80px">
      <FestivalFooter></FestivalFooter>
    </el-footer>
  </el-container>
</template>

<script>
import FestivalHeader from "@/components/FestivalHeader.vue";
import FestivalList from "@/components/FestivalList.vue";
import FestivalFooter from "@/components/FestivalFooter.vue";
import FestivalContent from "@/components/FestivalContent.vue";
import AboutMe from "@/components/AboutMe.vue";
import Login from "@/components/Login.vue"
import Register from "@/components/Register.vue"
import FestivalManage from "@/components/FestivalManage.vue"
import FestivalAddorEdit from "@/components/FestivalAddorEdit.vue"

export default {
  name: "Home",
  components: {
    FestivalHeader,
    FestivalList,
    FestivalFooter,
    FestivalContent,
    AboutMe,
    Login,
    Register,
    FestivalManage,
    FestivalAddorEdit,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.el-main {
  padding-left: 20.8%;
  padding-right: 20.8%;
}

.wrap {
  -webkit-text-size-adjust: 100%;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1.8em;
  line-height: 1.75;
  color: #333;
  -webkit-font-smoothing: antialiased;
  margin-right: auto;
  margin-left: auto;
  box-sizing: content-box;
}
</style>
